<!doctype html>
<html lang="zh-cn">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/bootstrap-table.min.css">
  <link rel="stylesheet" href="./css/bootstrap-table-fixed-columns.min.css">
  <link rel="stylesheet" href="./css/bootstrap-icons.css">

  <style type="text/css">
    /* 指定全局字体大小(缩小后中文好看一点) */
    html {
      font-size: 14px;
    }
  </style>

  <script type="text/javascript">
    // 支持window.onload多次添加方法
    function addLoadEvent(fun) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
        window.onload = fun;
      }else{
        window.onload = function () {
          oldonload();
          fun();
        }
      }
    };

    /**
     * 自定义休眠时长函数
     * @param {int} numberMillis - 休眠时长，单位为毫秒
     */
    function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    };

    // 添加onload事件
    addLoadEvent(function (){
      // 切换页签的前触发的动作
      $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        // e.target 新激活页签对象, e.relatedTarget 原页签对象
        $.douyin_api.on_toggle_tab($(e.target), $(e.relatedTarget));
      });

      // 启用提示信息
      $("[data-toggle='tooltip']").tooltip();
      $("[tooltip='true']").tooltip(); // 支持通过别的属性设置

      // 模态框的打开前操作，可以进行自动填值
      $('#share_modal').on('show.bs.modal', function (e) {
        // e.relatedTarget 触发动作的对象，e.target 目标模态窗口
        // 不同模态框的个性处理逻辑
        switch ($(e.target).attr('content_id')) {
          case 'device_bind_user':
            // 绑定用户
            var device_name = $('#device_bind_user').attr('row-id');
            var row = $('#devices_table').bootstrapTable('getRowByUniqueId', device_name);
            $('#bind_user_device_name').val(device_name);
            $('#bind_user_user_name').val(row.nick_name);
            break;
        }
      });

      // 加载界面
      $.douyin_api.init_ui();
      $.douyin_api.start_devices_sync();
    });

  </script>

  <title>抖音直播间管理后台</title>
</head>

<body class="body-with-top-nav d-flex">
  <script>
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isIE = !(userAgent.indexOf("Opera") > -1 || userAgent.indexOf("Edge") > -1 || userAgent.indexOf("Firefox") > -
      1 || userAgent.indexOf("Safari") > -1 || userAgent.indexOf("Chrome") > -1);
  </script>

  <!-- 对屏幕阅读器以外的设备隐藏内容 -->
  <a id="skippy" class="sr-only sr-only-focusable" href="#content">
    <div class="container"> <span class="skiplink-text">Skip to main content</span> </div>
  </a>

  <div class="container-fluid">
    <nav>
      <div class="nav nav-tabs nav-pills" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-device-tab" data-toggle="tab" href="#nav-device" role="tab"
          aria-controls="nav-device" aria-selected="true">设备连接</a>
        <a class="nav-item nav-link" id="nav-bg-tab" data-toggle="tab" href="#nav-bg" role="tab" aria-controls="nav-bg"
          aria-selected="false">后台管理</a>
        <a class="nav-item nav-link" id="nav-config-tab" data-toggle="tab" href="#nav-config" role="tab"
          aria-controls="nav-config" aria-selected="false">系统配置</a>
      </div>
    </nav>
    <div class="tab-content mt-2" id="nav-tabContent">
      <div class="tab-pane fade show active" id="nav-device" role="tabpanel" aria-labelledby="nav-device-tab">
        <!-- 设备清单 -->
        {% include 'plugin/douyin/devices/devices_main.html' %}
      </div>
      <div class="tab-pane fade" id="nav-bg" role="tabpanel" aria-labelledby="nav-bg-tab">
        <!-- 后台管理 -->
        {% include 'plugin/douyin/control/bg_main.html' %}
      </div>
      <div class="tab-pane fade" id="nav-config" role="tabpanel" aria-labelledby="nav-config-tab">
        <!-- 系统配置 -->
        {% include 'plugin/douyin/sysconfig/sysconfig.html' %}
      </div>
    </div>
  </div>

  <!-- 固定的Modal模块 -->
  <div class="modal" id="share_modal" role="dialog" tabindex="-1">

    <!-- 获取抖音用户的弹出框 -->
    {% include 'plugin/douyin/devices/modal_bind_user.html' %}

    <!-- Loading遮罩 -->
    {% include 'ui_control/modal_loading.html' %}

    <!-- 连接手机的帮助 -->
    {% include 'plugin/douyin/devices/modal_connect_help.html' %}

  </div>

   <!-- 居中显示的提示框 -->
   {% include 'ui_control/alert_toast.html' %}


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="./js/jquery-3.5.1.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/bootstrap-table.min.js"></script>
  <script src="./js/bootstrap-table-zh-CN.min.js"></script>
  <script src="./js/bootstrap-table-fixed-columns.min.js"></script>
  <!-- 提升画布显示质量 -->
  <script src="./js/hidpi-canvas.min.js"></script>
  <script src="./js/js.cookie.min.js"></script>
  <script src="./js/uuid.js"></script>
  <script src="./js/socket.io.js"></script>
  <script src="./js/ToolFunction.js"></script>
  <script src="./js/DragControl.js"></script>
  <script src="./js/ui_tools.js"></script>
  <script src="./js/restful_api.js"></script>
  <script src="./plugin/douyin/js/douyin_api.js"></script>
</body>

</html>